const tile = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
    })
})

const zoom = 4, center = ol.proj.fromLonLat([107.11040599933166, 34.26271532332011])
var map = new ol.Map({
    target: 'map',
    layers: [
        tile
    ],
    view: new ol.View({
        center,
        zoom
    })
});

class OverviewMap {
    constructor(domId, layers = [], zoomDelta = 4) {
        const that = this
        this.layers = layers.length > 0 ? layers : map.getLayers()
        this.zoomDelta = zoomDelta
        this.mapView = document.createElement('div')
        this.mapView.classList.add('map-view')
        this.mapDom = document.getElementById(domId)
        this.mapDom.appendChild(this.mapView)

        let x;
        let y;
        let left;
        let top;
        let isDown = false;
        // 添加事件
        that.mapView.onmousedown = function (e) {
            x = e.clientX;
            y = e.clientY;
            left = this.offsetLeft;
            top = this.offsetTop;
            isDown = true;
        }
        that.mapDom.onmouseup = function(){
            isDown = false;
        }
        that.mapDom.onmouseleave = function(){
            isDown = false;
        }
        window.onmousemove = function (e) {
            if(!isDown) return false;
            let newX = e.clientX;
            let newY = e.clientY;
            let newLeft = newX - (x - left);
            let newTop = newY - (y - top);
            if(newLeft < 0)newLeft = 0;
            if(newTop < 0) newTop = 0;
            const w = that.mapView.offsetWidth
            const h = that.mapView.offsetHeight
            const mapW = that.mapDom.offsetWidth
            const mapH = that.mapDom.offsetHeight
            if((newLeft + w) > mapW) newLeft = mapW - w - 2
            if((newTop+ h) > mapH)  newTop = mapH - h - 2
            that.mapView.style.left = newLeft + "px"
            that.mapView.style.top = newTop + "px"
            // 设置主图的范围
            const tl = [newLeft, newTop]
            const br = [newLeft + w, newTop + h]
            const [xmin, ymax] = that.map.getCoordinateFromPixel(tl)
            const [xmax, ymin] = that.map.getCoordinateFromPixel(br)
            const extent = [xmin, ymin, xmax, ymax]
            map.getView().fit(extent)
        }

        this.initMap()

        map.on('moveend', () => {
            if(isDown) return
            let zoom = map.getView().getZoom() - that.zoomDelta
            const center = map.getView().getCenter()
            that.view.setCenter(center)
            that.view.setZoom(zoom)
            // 计算主图在鹰眼图中的位置
            const [xmin, ymin, xmax, ymax] = map.getView().calculateExtent()
            const tl = that.map.getPixelFromCoordinate([xmin, ymax])
            const br = that.map.getPixelFromCoordinate([xmax, ymin])
            const w = br[0] - tl[0]
            const h = br[1] - tl[1]
            that.mapView.style.width = w + 'px'
            that.mapView.style.height = h + 'px'
            that.mapView.style.left = tl[0] + 'px'
            that.mapView.style.top = tl[1] + 'px'
        })
    }

    initMap() {
        const that = this
        let zoom = map.getView().getZoom() - that.zoomDelta
        const center = map.getView().getCenter()
        zoom = zoom < 0 ? 0 : zoom
        that.view = new ol.View({
            center,
            zoom
        })
        this.map = new ol.Map({
            target: that.mapDom,
            controls: [],
            interactions: [],
            layers: that.layers,
            view: that.view
        });
    }
}

const layers = [
    new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
        })
    })
]
new OverviewMap('overviewMap', layers)